<template>
  <view class="index" v-if="!isLoading">
    <xy-flower ref="xyFlower" :cur_url="'index'"></xy-flower>
    <view class="container">
      <view class="userinfo">
        <view class="avatar">
          <image v-if="avatar" :src="$xyfun.image(avatar)"></image>
        </view>
        <view class="info">
          <view class="nickname">HI,{{ nickname }}
            <view class="grade" :style="'background:'+top_card.theme_color" v-if="top_card!==''">{{top_card.title}}</view>
          </view>
          <view class="uplevel">升级攻略</view>
        </view>
      </view>
      <swiper class="card-swiper" next-margin="40rpx" previous-margin="20rpx" @change="swiperChange" :current="current_swiper">
        <swiper-item v-for="(item,index) in cards" @tap="$xyfun.to('/pages/card?id='+item.id)">
          <view :class="'card '+ (index==current_swiper?'cur_card':'')">
            <image :src="$xyfun.image(item.bgimage)" class="card_bg"></image>
            <view class="cur" v-if="item.nums">当前等级</view>
            <view class="info">
              <view class="slogan">{{ item.slogan }}</view>
              <view class="title">{{ item.title }}</view>
              <view class="overtime" v-if="item.nums">
                {{$xyfun.dataFormat(item.overtime)}}过期
              </view>
              <view class="overtime" v-else></view>
              <view class="rule" :style="'color:'+ item.theme_color">{{ item.desc }}></view>
            </view>
            <view class="right">
              <image :src="$xyfun.image(item.image)"></image>
              <view class="buy" :style="'color:'+ item.theme_color">
                {{item.nums?'续期':'立即购买'}}
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
      <view class="menu" v-if="common.appConfig.hide_index_menu==0">
        <view class="item" @tap="$xyfun.to('/pages/user/info')">
          <view class="img">
            <image mode="heightFix" :src="$xyfun.image('/static/images/benfit/idCardIcon.png')"></image>
          </view>
          <text>完善信息</text>
        </view>
        <view class="item" @tap="$xyfun.to('/pages/benfit/order')">
          <view class="img">
            <image mode="heightFix" :src="$xyfun.image('/static/images/benfit/orderIcon.png')"></image>
          </view>
          <text>会员订单</text>
        </view>
        <view class="item" @tap="$xyfun.to('/pages/user/address/list')">
          <view class="img">
            <image mode="heightFix" :src="$xyfun.image('/static/images/benfit/addrIcon.png')"></image>
          </view>
          <text>地址管理</text>
        </view>
        <view class="item" @tap="$xyfun.to('/pages/user/balance')">
          <view class="img">
            <image mode="heightFix" :src="$xyfun.image('/static/images/benfit/integral.png')"></image>
          </view>
          <text>我的积分</text>
        </view>
      </view>
      <view class="banner">
        <image mode="widthFix" :src="$xyfun.image(common.siteConfig.teacher_banner)"></image>
      </view>
    </view>
    <view class="service_box" v-if="common.appConfig.appmodel==0">
      <view class="module_tit">{{common.siteConfig.specail_title}}</view>

      <view v-for="(val,index) in specails">
        <view class="lists" v-if="index===current_swiper">
          <view :class="v.is_disable==1?'item disable':'item'"
                v-for="v in val"
                @tap="onPoweDetrail(v)">
            <view class="lock" v-if="!v.nums">
              <image :src="$xyfun.image('/static/images/benfit/lock.png')"></image>
            </view>

            <view class="tit">{{ v.title }}</view>
            <view class="desc">
              {{ v.desc }}
            </view>
            <view class="but">{{ v.nums>0?'立即使用':'了解详情' }}</view>
            <image class="cartoon_image" mode="widthFix" v-if="v.image" :src="$xyfun.image(v.image)"></image>
          </view>

        </view>
      </view>
    </view>

    <view class="mental_health" @tap="onPoweDetrail(health.benfit)" v-if="health && common.appConfig.appmodel==0">
      <view class="lock" v-if="!health.benfit.nums">
        <image :src="$xyfun.image('/static/images/benfit/lock.png')"></image>
      </view>
      <image class="image" :src="$xyfun.image(common.siteConfig.mental_health)" mode="widthFix"></image>
    </view>

    <view class="product_box" v-if="common.appConfig.appmodel==0">
      <view class="module_tit">{{common.siteConfig.products_title}}</view>

      <view v-for="(item,index) in goods">
        <view class="lists" v-if="index===current_swiper">
          <view class="scroll">

            <view :class="v.is_disable==1?'item disable':'item'" v-for="(v, idx) in item" :key="idx" v-if="idx%2==0"
                  @tap="onGoods(v)">
              <view class="lock" v-if="!v.nums">
                <image :src="$xyfun.image('/static/images/benfit/lock.png')"></image>
              </view>
              <view class="tit">{{ v.title }}</view>
              <view class="desc">{{ v.desc }}</view>
              <view class="but">{{ v.nums>0?'立即使用':'了解详情' }}</view>
              <image :src="$xyfun.image(v.image)" class="icon" v-if="v.image"></image>
            </view>

          </view>
          <view class="scroll">
            <view :class="v.is_disable==1?'item disable':'item'" v-for="(v, idx) in item" :key="idx" v-if="idx%2==1"
                  @tap="onGoods(v)">
              <view class="lock" v-if="!v.nums">
                <image :src="$xyfun.image('/static/images/benfit/lock.png')"></image>
              </view>
              <view class="tit">{{ v.title }}</view>
              <view class="desc">{{ v.desc }}</view>
              <view class="but">{{ v.nums>0?'立即使用':'了解详情' }}</view>
              <image :src="$xyfun.image(v.image)" class="icon" v-if="v.image"></image>
            </view>

          </view>
        </view>
      </view>
    </view>

    <view class="rule_box" v-if="common.appConfig.appmodel==0">
      <view class="module_tit">旅游权益</view>
      <view class="crumb">
       <view>门票</view>
      </view>
      <view v-for="(val,index) in travel">
        <view class="lists" v-if="index===current_swiper">
          <view :class="v.is_disable==1?'item disable':'item'" :style="'background-image: url(' + $xyfun.image(v.image) + ')'" v-for="v in val"
                @tap="onPoweDetrail(v)">
            <view class="lock" v-if="!v.nums">
              <image :src="$xyfun.image('/static/images/benfit/lock.png')"></image>
            </view>
            <view class="tit">{{ v.title }}</view>
            <view class="desc">{{v.desc}}</view>
            <view class="but">{{ v.nums>0?'立即使用':'了解详情' }}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="pop_adv_bg" v-if="adv_show && health" @tap="advHide()">
      <view class="pop_adv" :style="'background-image:url('+$xyfun.image(health.bgimage)+')'">
        <image mode="widthFix" class="adv_image" :src="$xyfun.image(health.image)"></image>
        <view class="title">{{health.title}}</view>
        <view class="coupon">
          <view class="left">
            <text>{{health.price}}</text>
            元
          </view>
          <view class="right">
            <view>{{health.desc}}</view>
            <text>{{health.slogan}}</text>
          </view>
        </view>
        <view class="confirm" @click.stop="goPay()">
          <text>立即领取</text>
        </view>
      </view>
      <view class="close_adv">
        <image :src="$xyfun.image('/static/images/rights/pop_adv_close.png')"></image>
      </view>
    </view>

    <payPop ref='payPop' @createOrder="createOrder"></payPop>

  </view>
</template>
<script>
import {mapState} from 'vuex';
import xyFlower from "@/components/xy-menu/flower.vue";
import payPop from '@/components/paypop/index.vue';
import Pay from '@/utils/pay';

export default {
  components: {
    xyFlower,
    payPop
  },
  data() {
    return {
      isLoading: true,

      avatar: '',
      nickname: '未登录',

      adv_show: true,

      current_swiper: 0,
      top_card: '',
      cards : [],
      specails : [],
      goods : [],
      health : {},
      travel : [],
    }
  },
  computed: {
    ...mapState(['common', 'user'])
  },
  async onLoad() {
    wx.hideTabBar()
    this.loadData();
  },
  onShow() {
    this.loadData();
  },
  methods: {
    async loadData() {
      var that = this;
      this.$api.post({
        url: '/benfit/index',
        loadingTip: '加载中...',
        data: {},
        success: res => {
          if(res.userinfo){
            this.nickname = res.userinfo.nickname;
            this.avatar = res.userinfo.avatar;
          }
          if(res.top_card){
            this.top_card = res.top_card;
          }
          this.cards = res.cards;
          this.specails = res.specails;

          this.goods = res.goods;
          this.health = res.health;
          if(res.health && res.health.benfit && res.health.benfit.nums){
            this.adv_show = false;
          }

          this.travel = res.travel;
          that.isLoading = false;
        }
      });
    },

    onGoods(item){
      if(item.is_disable==1){
        return;
      }
      this.$xyfun.to('/pages/shop/goods/detail?id='+item.goods_id)
    },

    onPoweDetrail(item) {

      let id = item.id
      if(item.is_disable==1){
        return;
      }
      if(item.course_num>0){
        this.$xyfun.to('/pages/course_list');//课程权益
        return;
      }

      this.$xyfun.to('/pages/benfit?id=' + id);
    },


    swiperChange(e) {
      var that = this;
      that.current_swiper = e.detail.current;
    },


    goPay() {
      if(this.user.isLogin){
        this.$refs.payPop.showDiaLog(this.health.price)
      }else{
        this.$xyfun.toLogin();
      }

    },

    //创建订单
    createOrder(pay_type){
      var that = this;
      // 提交订单
      this.$api.post({
        url: '/card_order/add',
        data: {
          card_id:this.health.id,
          nums : 1
        },
        loadingTip: '提交订单中...',
        success: res => {
          //发起支付
          var pay = new Pay(pay_type, res, 'card');
          pay.payMehod().then((res)=>{
            that.disabled = false;
            that.$refs.payPop.disabled = false;
            pay.payResult(res);
          },(res)=>{
            that.$refs.payPop.disabled = false;
            if(pay_type != 'balance'){
              pay.payResult(res);
            }
          });
        },fail: res=>{
          that.$refs.payPop.disabled = false;
        }
      });
    },


    advHide() {
      this.adv_show = false;
    }


  }
}
</script>
<style>
page {
  background: #f2f2f2;
  padding-bottom: 120rpx;
}
</style>
<style lang="scss">
.container {
  background: linear-gradient(to bottom, #a9e7fe, #f3f3f3, #f3f3f3);
  padding-top: 100rpx;
}

.userinfo {
  display: flex;
  margin: 20rpx 30rpx;

  .avatar {
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 20rpx;
    background: #f2f2f2;

    image {
      width: 90rpx;
      height: 90rpx;
    }
  }

  .info {
    .nickname {
      display: flex;
      margin-bottom: 10rpx;
      font-size: 34rpx;

      .grade {
        margin-left: 20rpx;
        color: #fff;
        font-size: 26rpx;
        background: linear-gradient(to right, #62b47d, #1f7cb4);
        border-top-left-radius: 14rpx;
        border-bottom-right-radius: 14rpx;
        height: 40rpx;
        line-height: 40rpx;
        padding: 0 10rpx;
      }
    }

    .uplevel {
      font-size: 26rpx;
    }
  }
}

.card-swiper {
  margin-top: -20rpx;
  height: 380rpx;

  swiper-item {
    height: 380rpx;
  }
}

.card {
  display: flex;
  justify-content: space-between;
  margin: 60rpx 0 30rpx 20rpx;
  border-radius: 20rpx;
  height: 300rpx;
  position: relative;

  .card_bg {
    width: 100%;
    height: 300rpx;
    position: absolute;
    z-index: -1;
  }

  .cur {
    position: absolute;
    left: 0;
    top: 0;
    background: #e8bc8e;
    border-top-left-radius: 20rpx;
    font-size: 26rpx;
    color: #7e5127;
    font-weight: bold;
    padding: 0 6rpx 0 14rpx;
    height: 50rpx;
    line-height: 50rpx;

    &:after {
      content: '';
      display: block;
      position: absolute;
      width: 40rpx;
      height: 50rpx;
      right: -25rpx;
      top: 0;
      background: #e8bc8e;
      clip-path: polygon(100% 0, 40% 0, 40% 100%);
    }
  }

  .info {
    margin-top: 50rpx;
    color: #fff;
    margin-left: 50rpx;

    .slogan {
      font-size: 32rpx;
      font-weight: bold;
      margin-top: 20rpx;
    }

    .title {
      font-size: 32rpx;
      margin-bottom: 10rpx;
      font-weight: bold;
    }

    .overtime {
      font-size: 20rpx;
      display: flex;
      align-items: center;
      height: 50rpx;

      .but {
        background: #fafdff;
        color: #49a78d;
        font-size: 26rpx;
        padding: 4rpx 20rpx;
        border-radius: 30rpx;
        margin-left: 20rpx;
      }
    }

    .rule {
      display: inline-block;
      margin-top: 44rpx;
      margin-left: -10rpx;
      height: 50rpx;
      line-height: 50rpx;
      border-radius: 30rpx;
      padding: 0 20rpx;
      font-size: 22rpx;
      background: linear-gradient(to right, #fff, #e1f4ff);
      color: #4e8295;
    }
  }

  .right {
    image {
      position: absolute;
      top: -40rpx;
      right: -20rpx;
      width: 230rpx;
      height: 180rpx;
    }

    .buy {
      border-radius: 30rpx;
      font-weight: bold;
      padding: 10rpx 10rpx;
      font-size: 26rpx;
      position: absolute;
      right: 20rpx;
      bottom: 40rpx;
      width: 180rpx;
      text-align: center;
      color: #2885a7;
      background: linear-gradient(to right, #fff, #ecf4fc, #fff);
    }
  }
}

.cur_card {
  height: 340rpx;
  margin-top: 40rpx;

  .card_bg {
    height: 340rpx;
  }
}

.menu {
  display: flex;
  justify-content: space-around;
  margin: 30rpx 30rpx;

  .item {
    text-align: center;

    .img {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 14rpx;
      width: 90rpx;
      height: 90rpx;
      background: #fff;
      border-radius: 50%;

      image {
        height: 40rpx;
      }
    }

    text {
      font-size: 24rpx;
      color: #67689b;
    }
  }
}

.banner {
  margin: 30rpx 30rpx;
  border-radius: 15rpx;
  overflow: hidden;

  image {
    width: 100%;
    border-radius: 15rpx;
  }
}

.service_box {
  background: #fff;
  margin: 30rpx;
  overflow: hidden;

  .module_tit {
    font-size: 34rpx;
    color: #333333;
    margin: 20rpx 0 20rpx 20rpx;
  }

  .lists {
    padding: 0 20rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .item {
      width: 48%;
      border-radius: 10rpx;
      color: #fff;
      position: relative;
      background-repeat: no-repeat;
      background-position: right bottom;
      background-size: 120rpx;
      padding: 0 20rpx;
      box-sizing: border-box;
      margin-bottom: 20rpx;
      overflow: hidden;
      height: 220rpx;

      .tit {
        font-size: 34rpx;
        margin-bottom: 10rpx;
        margin-top: 20rpx;
      }

      .desc {
        font-size: 24rpx;
        margin-bottom: 40rpx;
      }

      .but {
        background: #fff;
        font-size: 28rpx;
        padding: 6rpx 0;
        border-radius: 30rpx;
        width: 150rpx;
        text-align: center;
        margin-bottom: 20rpx;
      }

      .cartoon_image {
        width: 130rpx;
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }

    .item:nth-of-type(1) {
      background: linear-gradient(to top right, #73b6fe, #4487f6);

      .but {
        background: linear-gradient(to top, #d6e4fe, #e1ecf8);
        color: #0641a6;
      }
    }

    .item:nth-of-type(2) {
      background: linear-gradient(to top right, #4161c7, #b2cef9);

      .but {
        background: linear-gradient(to top, #dbe6fb, #e1ecf8);
        color: #000043;
      }
    }

    .item:nth-of-type(3) {
      background: linear-gradient(to top right, #76bf5c, #a3d18e);

      .but {
        background: linear-gradient(to top, #daeed2, #add59a);
        color: #a7680d;
      }
    }

    .item:nth-of-type(4) {
      background: linear-gradient(to top right, #c4552a, #f9a889);

      .but {
        background: linear-gradient(to top, #fef5de, #fefdf3);
        color: #a7680d;
      }
    }

    .item:nth-of-type(5) {
      background: linear-gradient(to top right, #389b95, #7fc3bf);

      .but {
        background: linear-gradient(to top, #d2edec, #f1f9f9);
        color: #319791;
      }
    }

    .item:nth-of-type(6) {
      background: linear-gradient(to top right, #d43a44, #f87981);

      .but {
        background: linear-gradient(to top, #f6e5e5, #fef3f3);
        color: #d0323c;
      }
    }
  }

  .lock {
    position: absolute;
    right: -40rpx;
    top: -40rpx;
    background: #4875fa;
    width: 80rpx;
    height: 80rpx;
    transform: rotate(45deg);
    z-index: 11;

    image {
      width: 20rpx;
      height: 20rpx;
      position: relative;
      left: 30rpx;
      bottom: -40rpx;
      transform: rotate(-45deg);
    }
  }
}

.mental_health {
  margin: 0 35rpx;
  overflow: hidden;
  position: relative;

  .image {
    width: 100%;
  }

  .lock {
    position: absolute;
    right: -40rpx;
    top: -40rpx;
    background: #4875fa;
    width: 80rpx;
    height: 80rpx;
    transform: rotate(45deg);
    z-index: 11;

    image {
      width: 20rpx;
      height: 20rpx;
      position: relative;
      left: 30rpx;
      bottom: -40rpx;
      transform: rotate(-45deg);
    }
  }
}

.product_box {
  background: #fff;
  margin: 30rpx;
  overflow: hidden;

  .module_tit {
    font-size: 34rpx;
    color: #333333;
    margin: 20rpx 0 20rpx 20rpx;
  }

  .lists {
    overflow: hidden;

    .scroll {
      margin-left: 30rpx;
      overflow-x: scroll;
      overflow-y: hidden;
      white-space: nowrap;

      &::-webkit-scrollbar {
        width: 0;
      }

      .item {
        position: relative;
        display: inline-block;
        vertical-align: top;
        color: #4875fa;
        width: 200rpx;
        background-color: #eaedfe;
        position: relative;
        padding: 20rpx 20rpx 20rpx 10rpx;
        border-radius: 10rpx;
        margin-right: 14rpx;
        overflow: hidden;

        .lock {
          position: absolute;
          right: -40rpx;
          top: -40rpx;
          background: #4875fa;
          width: 80rpx;
          height: 80rpx;
          transform: rotate(45deg);

          image {
            width: 20rpx;
            height: 20rpx;
            position: relative;
            left: 30rpx;
            bottom: -40rpx;
            transform: rotate(-45deg);
          }
        }

        .tit {
          color: #4875fa;
          margin-bottom: 15rpx;
        }

        .desc {
          color: #333;
          margin-bottom: 30rpx;
          font-size: 22rpx;
        }

        .but {
          color: #fff;
          font-size: 20rpx;
          padding: 6rpx 0;
          border-radius: 20rpx;
          width: 120rpx;
          text-align: center;
          background: linear-gradient(to right, #4875fa, #4875fa, #a9bbff);
        }

        .icon {
          position: absolute;
          width: 80rpx;
          height: 80rpx;
          right: 0;
          bottom: 0;
        }
      }
    }
  }
}

.product_box .lists .scroll:nth-of-type(2n) .item {
  background-color: #edfdfc;

  .lock {
    background: #5fb5c7;
  }

  .tit {
    color: #5fb5c7;
  }

  .but {
    background: linear-gradient(to right, #5fb5c7, #5fb5c7, #8de0ef);
  }
}

.rule_box {
  background: #fff;
  margin: 30rpx;
  text-align: center;
  padding: 0 20rpx 20rpx 20rpx;

  .module_tit {
    margin: 0 auto;
    position: relative;
    width: 300rpx;
    text-align: center;
    font-weight: bold;
    font-size: 28rpx;
    background: #d8e4fb;
    height: 70rpx;
    line-height: 70rpx;
    clip-path: polygon(0% 0%, 100% 0, 90% 100%, 10% 100%, 0 0);

    &:before {
      position: absolute;
      display: block;
      content: '';
      width: 40rpx;
      height: 1rpx;
      background-color: #333;
      left: 40rpx;
      top: 35rpx;
    }

    &:after {
      position: absolute;
      display: block;
      content: '';
      width: 40rpx;
      height: 1rpx;
      background-color: #333;
      right: 40rpx;
      top: 35rpx;
    }
  }

  .crumb {
    white-space: nowrap;
    margin-top: 20rpx;
    text-align: left;

    .item {
      display: inline-block;
      margin-right: 30rpx;
      font-size: 28rpx;
      color: #333;

      &.active {
        color: #2497b0;
      }
    }
  }

  .lists {
    margin-top: 20rpx;

    .item {
      border-radius: 10rpx;
      text-align: left;
      padding: 20rpx;
      background-size: cover;
      position: relative;
      overflow: hidden;
      height: 195rpx;
      box-sizing: border-box;
      margin-top: 20rpx;

      .tit {
        color: #333;
        font-size: 30rpx;
        font-weight: bold;
        margin-bottom: 15rpx;
      }

      .desc {
        color: #333;
        margin-bottom: 30rpx;
        font-size: 20rpx;
      }

      .but {
        padding: 6rpx 0;
        border-radius: 30rpx;
        font-size: 24rpx;
        color: #fff;
        background: linear-gradient(to right, #4875fa, #7b9aff);
        width: 140rpx;
        text-align: center;
      }

      .lock {
        position: absolute;
        right: -40rpx;
        top: -40rpx;
        background: #4875fa;
        width: 80rpx;
        height: 80rpx;
        transform: rotate(45deg);
        z-index: 11;

        image {
          width: 20rpx;
          height: 20rpx;
          position: relative;
          left: 30rpx;
          bottom: -40rpx;
          transform: rotate(-45deg);
        }
      }
    }

  }
}

.pop_adv_bg {
  background: rgba(0, 0, 0, 0.58);
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .pop_adv {
    margin: -20rpx auto 0 auto;
    z-index: 2;
    width: 540rpx;
    background-size: 100% 100%;
    padding-bottom: 30rpx;
    border-radius: 20rpx;

    .adv_image {
      display: block;
      width: 350rpx;
      margin: -80rpx auto 30rpx auto;
    }

    .title {
      font-size: 50rpx;
      text-align: center;
      margin-bottom: 40rpx;
      font-weight: normal;
    }

    .coupon {
      display: flex;
      justify-content: center;

      .left {
        background: linear-gradient(to top right, #fa8239, #fd9e51);
        color: #fff;
        margin-right: 3rpx;
        height: 190rpx;
        width: 180rpx;
        text-align: center;
        padding-top: 20rpx;
        box-sizing: border-box;
        border-radius: 10rpx;

        text {
          font-size: 100rpx;
          margin-right: 10rpx;
          position: relative;
          bottom: -20rpx;
        }
      }

      .right {
        height: 190rpx;
        width: 270rpx;
        background: linear-gradient(to top right, #fa8239, #fd9e51);
        color: #fff;
        font-size: 30rpx;
        text-align: center;
        padding-top: 30rpx;
        box-sizing: border-box;
        border-radius: 10rpx;

        view {
          font-size: 46rpx;
          margin-bottom: 4rpx;
        }

        text {
          font-size: 28rpx;
          color: #fedfca;
        }
      }
    }

    .confirm {
      width: 400rpx;
      border-radius: 50rpx;
      color: #fff;
      font-size: 36rpx;
      line-height: 78rpx;
      height: 78rpx;
      background: linear-gradient(to top, #f44100, #f97509);
      border: 4rpx solid #fff;
      font-weight: bold;
      margin: 60rpx auto 30rpx auto;
      text-align: center;

      text {
        display: block;
        border-radius: 50rpx;
        border: 1rpx solid #000;
      }
    }
  }

  .close_adv {
    margin-top: 60rpx;

    image {
      width: 50rpx;
      height: 50rpx;
    }
  }
}

.disable{
  filter: grayscale(100%);
}
</style>

